<script setup lang="ts">
type PropsType = {
  title: string
  current: number
}

const stepsList = ['选择商品', '核对信息', '支付订单']

const props = defineProps<PropsType>()
</script>

<template>
  <div class="flex justify-between py-4 px-8 bg-#f9f9f9 items-center">
    <h2 class="text-2xl">{{ title }}</h2>
    <div>
      <a-steps :current="0" label-placement="vertical" small>
        <a-step v-for="(item, index) in stepsList" :key="item" :status="index < current ? 'finish' : undefined">
          {{ item }}
        </a-step>
      </a-steps>
    </div>
  </div>
</template>

<style scoped>
:deep(.arco-steps-icon) {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.05);
  color: #76a5af;
}

:deep(.arco-steps-item-tail::after) {
  background-color: #76a5af !important;
}
</style>
